<template>
	<view class="user-box">
		<view class="user-center u-border-top">


			<view class="flex justify-between align-center h109 ">
				<view class="f28 flex align-center" style="color: #333333;">
					<text style="color: #000000; font-weight: 500;">语音接听</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					<u-switch v-model="voice" active-color="#27D77A" inactive-color="#CCCCCC"></u-switch>
				</view>
			</view>


			<view class="flex justify-between align-center h109 u-border-bottom" @click="showYu(0)">
				<view class="f28 flex align-center" style="color: #333333;">
					<text style="color: #000000; font-weight: 500;">语音价格设置</text>
				</view>
				<view class="f24 flex align-center" style="color: #999999;">
					<text>{{uni}}/分钟 </text>
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>




			<view class="flex justify-between align-center h109 ">
				<view class="f28 flex align-center" style="color: #333333;">
					<text style="color: #000000; font-weight: 500;">视频接听</text>
				</view>
				<view class="f28 flex align-center" style="color: #333333;">
					<u-switch v-model="checked" active-color="#27D77A" inactive-color="#CCCCCC"></u-switch>
				</view>
			</view>


			<view class="flex justify-between align-center h109 " @click="showShi(1)">
				<view class="f28 flex align-center" style="color: #333333;">
					<text style="color: #000000; font-weight: 500;">视频价格设置</text>
				</view>
				<view class="f24 flex align-center" style="color: #999999;">
					<text>{{init}}星币/分钟 </text>
					<i class="cuIcon-right ml19 f35 " style="color: #999999;"></i>
				</view>
			</view>




		</view>



		<u-select v-model="voicePicker" value-name="priceUnit" @confirm="confirmAdd" label-name="price" :list="voiceList"></u-select>


		<u-select v-model="showPicker" :list="voiceList"
			value-name="priceUnit" @confirm="confirmVideo" label-name="price"></u-select>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				voice: false,
				checked: false,
				voicePicker: false,
				showPicker: false,
				voiceList: [],
				mediumType: 0,
				checkedList:[{
					value: '1',
					label: '5星币'
				},{
					value: '1',
					label: '5星币'
				},{
					value: '1',
					label: '5星币'
				},{
					value: '1',
					label: '5星币'
				},{
					value: '1',
					label: '5星币'
				},{
					value: '1',
					label: '5星币'
				}],
				init: 0,
				uni: 0,
			};
		},
		onShow() {},
		onLoad(e) {
			this.getList()
		},
		methods: {
			removeUserInfo() {
				this.l.to('/pages/register/login')
			},
			async getList() {
				const res = await this.$u.get(`api/user/chat/price/set/list/${this.mediumType}`)
				this.voiceList = res.data
				console.log(this.voiceList)
			},
			// 语音
			showYu(index) {
				this.voicePicker = true
				this.mediumType = index
				this.getList()
			},
			
			// 视频
			showShi(index) {
				this.showPicker = true
				this.mediumType = index
				this.getList()
			},
			
			confirmAdd(index) {
				this.uni = index[0].label + index[0].value
				console.log('index==>', index);
			},
			
			confirmVideo(index) {
				this.init = index[0].label + index[0].value
				console.log('index==>', index);
			},
		}
	};
</script>

<style lang="scss" scoped>
	.user-box {

		.user-center {
			padding: 0 30rpx;
		}

		.add-border {
			border-radius: 40rpx;
			padding: 18rpx 46rpx;
			border: 3rpx solid #40C6A8;
		}

		.bgc-red {
			color: #1F1F1F;
			font-size: 26rpx;
			margin-right: 57rpx;
			padding: 20rpx 50rpx;
			background-color: #F5F5F5;
			border-radius: 10rpx;
		}
	}
</style>
